<template>
  <div class="product-detail-view">
    <!-- 背景层 -->
    <div class="fp-bg darker">
      <div class="fb_bg_in"></div>
    </div>
    
    <!-- 内容层 -->
    <div class="content">
      <div class="section-container">
        <div class="content_sides">
          <!-- 左侧：面包屑和标题 -->
          <div class="content_side content_side__left">
            <div class="main_title_wrapper">
              <div class="main_subtitle">
                <ul class="breadcrumbs">
                  <li class="home">
                    <router-link to="/" class="home">主页</router-link>
                  </li>
                  <li>
                    <a href="/#catalog" @click.prevent="goToCatalog">目录</a>
                  </li>
                  <li>
                    <router-link :to="`/catalog/${categoryId}`">{{ categoryTitle }}</router-link>
                  </li>
                  <li class="current-item">
                    <span>{{ productData?.title }}</span>
                  </li>
                </ul>
              </div>
              <h1 class="main_title">{{ productData?.title }}</h1>
              <div class="title_description"></div>
            </div>
          </div>
          
          <!-- 右侧：产品图片和占位卡片 -->
          <div class="content_side content_side__right">
            <div class="product_display">
              <div class="product_image">
                <img v-if="productData?.image" :src="productData.image" :alt="productData.title">
              </div>
              <div class="empty_blocks">
                <div class="catalog_block">
                  <div class="corner top_right"></div>
                  <div class="corner top_left"></div>
                  <div class="corner bottom_right"></div>
                  <div class="corner bottom_left"></div>
                  <div class="catalog_block__ico"></div>
                </div>
                <div class="catalog_block">
                  <div class="corner top_right"></div>
                  <div class="corner top_left"></div>
                  <div class="corner bottom_right"></div>
                  <div class="corner bottom_left"></div>
                  <div class="catalog_block__ico">
                    <img alt="img" src="@/assets/images/category/zaglushka.svg">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 产品内容区域 -->
        <div class="product_content_wrapper">
          <!-- 手风琴文档区域 -->
          <div class="accordion_box main">
            <div class="element">
              <span class="title" @click="toggleAccordion">
                <span>文档</span>
                <svg class="svg_arrow" :class="{ 'open': isAccordionOpen }" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </span>
              <div class="content" :class="{ 'open': isAccordionOpen }">
                <div class="accordion_box sub">
                  <!-- 文档内容可以在这里添加 -->
                </div>
              </div>
            </div>
          </div>
          
          <!-- 产品描述 -->
          <div class="description" v-if="productData?.description" v-html="productData.description"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 导入产品图片
import productImage1 from '@/assets/images/details/unnamed.jpg?url';
import productImage2 from '@/assets/images/details/Снимок-5.png?url';

interface ProductData {
  id: string;
  title: string;
  image?: string;
  description: string;
}

const route = useRoute();
const router = useRouter();
const productId = computed(() => route.params.productId as string);
const categoryId = computed(() => route.params.categoryId as string);

const isAccordionOpen = ref(false);
const productData = ref<ProductData | null>(null);
const categoryTitle = ref('');

// 产品数据
const productsData: Record<string, Record<string, ProductData>> = {
  '01': {
    '01': {
      id: '01',
      title: '圆形不锈钢电焊管',
      image: productImage1,
      description: `
        <p>电焊不锈钢管是一种通用的金属轧制产品，采用板材钢制造。使用专用设备将坯料卷成圆管，然后焊接形成细而牢固的焊缝。与许多其他合金钢金属轧制产品一样，不锈钢焊管在各个活动领域都有广泛应用，从生产工艺线到设计艺术。这些产品具有高耐腐蚀性、强度和长使用寿命。同时，圆形焊管易于加工，安装简单。</p>
        <img class="alignnone" src="${productImage2}" alt="AISI 304/L, AISI 316/L不锈钢圆管" style="max-width: 422px; height: auto;">
        
        <h2>AISI钢制圆形不锈钢管：生产特点</h2>
        <p><strong>不锈钢圆形电焊管</strong>采用不同类型的焊接制造：</p>
        <ul>
          <li>TIG：惰性气体保护环境中使用钨电极的电弧焊；</li>
          <li>MIG：使用惰性气体环境中可熔电极的等离子焊接技术；</li>
          <li>HF：使用高频电流处理金属坯料的方法；</li>
          <li>SMAW：屏蔽电弧焊；</li>
          <li>LASER：激光作用下连接金属产品的技术；</li>
          <li>ElectronBeam：电子束焊接技术。</li>
        </ul>
        
        <p>可以使用不同的材料制造：AISI 304/L、AISI 316/L。形成成品管后，清洁并刷洗其表面以获得哑光涂层。如有必要，可以对产品进行打磨或镜面处理。某些类型的金属轧制产品需要进行额外的外部和内部化学或热处理，这使得不锈钢管可以用于食品工业。至于尺寸，<strong>电焊不锈钢管</strong>的直径可以从6到320毫米，壁厚从0.8到6毫米。</p>
        
        <h2><strong>不锈钢圆形电焊管</strong>的应用领域</h2>
        <p>由于高强度、抗温度变化和耐腐蚀破坏，圆形焊管可在各种条件下使用。耐用性和对化学腐蚀作用的中性使得金属轧制产品可以应用于以下领域：</p>
        <ul>
          <li>食品和化学工业：产品用于安装输送各种介质的管道：碱和酸、含酒精和碳酸饮料、牛奶、各种燃料——这是由于内壁表面不会形成水垢；</li>
          <li>医学、制药工业；</li>
          <li>设计：具有光亮抛光（镜面）表面的管道被认为是室内设计师最喜欢的材料。</li>
        </ul>
        
        <p>在明斯克购买<strong>圆形截面电焊不锈钢管</strong>可以在AlfaFood Technology公司。我们是最大的供应商，以最具吸引力的价格提供优质认证的批发和零售金属轧制产品。此外，为了客户的便利，我们公司组织了到明斯克、莫吉廖夫、布列斯特和白俄罗斯其他城市的快速配送。</p>
      `
    }
  }
};

// 类别标题映射
const categoryTitles: Record<string, string> = {
  '01': '不锈钢管道',
  '02': '管道阀门和配件'
};

const toggleAccordion = () => {
  isAccordionOpen.value = !isAccordionOpen.value;
};

onMounted(() => {
  // 允许页面滚动
  document.body.style.overflow = 'auto';
  document.documentElement.style.overflow = 'auto';
  
  // 禁用主页的 Observer（避免阻止详情页的滚轮事件）
  if ((window as any).panelObserver) {
    (window as any).panelObserver.kill?.();
    (window as any).panelObserver = null;
  }
  
  const categoryProducts = productsData[categoryId.value];
  if (categoryProducts && categoryProducts[productId.value]) {
    productData.value = categoryProducts[productId.value];
    categoryTitle.value = categoryTitles[categoryId.value] || '';
  } else {
    // 如果找不到数据，返回类目页
    router.push(`/catalog/${categoryId.value}`);
  }
});

onUnmounted(() => {
  // 恢复主页的滚动设置
  document.body.style.overflow = 'hidden';
  document.documentElement.style.overflow = 'hidden';
  
  // Observer 会在 PanelManager 重新挂载时重新创建，这里不需要处理
});

const goToCatalog = () => {
  router.push('/');
  setTimeout(() => {
    if (window.scrollToSection) {
      window.scrollToSection('catalog');
    }
  }, 100);
};
</script>

<style scoped>
.product-detail-view {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* 背景层 */
.fp-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

.fp-bg:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at 70% center, rgba(27, 33, 45, 0.7) 0, rgba(27, 33, 45, 0.9) 30%, #1b212d 50%, #1b212d 100%);
  z-index: 1;
}

.fb_bg_in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/backgrounds/bg_about.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
}

.fp-bg.darker .fb_bg_in::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 23, 36, 0.7);
  z-index: 1;
}

/* 内容层 */
.content {
  width: 100%;
  position: relative;
  z-index: 2;
}

.section-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 3rem 80px;
  max-width: 1920px;
  margin: 0 auto;
}

.content_sides {
  width: 100%;
  max-width: 150rem;
  margin: 200px auto 60px;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.content_side__left {
  width: 40%;
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content_side__right {
  flex: 1;
  min-width: 0;
}

.main_title_wrapper {
  margin-bottom: 4rem;
}

/* 面包屑 */
.breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  color: #e58707;
  flex-wrap: wrap;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: '>';
  margin-left: 8px;
  color: #e58707;
}

.breadcrumbs a {
  color: #e58707;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumbs a:hover {
  color: #ff9800;
}

.breadcrumbs .current-item span {
  color: #e58707;
}

/* 标题 */
.main_subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main_title {
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: #fff;
}

/* 产品展示容器 */
.product_display {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

/* 产品图片 */
.product_image {
  width: 600px;
  height: 600px;
  flex-shrink: 0;
}

.product_image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 占位卡片 */
.empty_blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  flex-shrink: 0;
}

.catalog_block {
  width: 300px;
  height: 295px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px;
}

/* 四个角的装饰边框 */
.corner {
  position: absolute;
  width: 3rem;
  height: 3rem;
}

.corner.top_right {
  top: 0;
  right: 0;
  border-right: 1px solid #e58707;
  border-top: 1px solid #e58707;
}

.corner.top_left {
  top: 0;
  left: 0;
  border-left: 1px solid #e58707;
  border-top: 1px solid #e58707;
}

.corner.bottom_right {
  bottom: 0;
  right: 0;
  border-right: 1px solid #e58707;
  border-bottom: 1px solid #e58707;
}

.corner.bottom_left {
  left: 0;
  bottom: 0;
  border-left: 1px solid #e58707;
  border-bottom: 1px solid #e58707;
}

.catalog_block__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.catalog_block__ico img {
  max-width: 100px;
  max-height: 100px;
  opacity: 0.3;
}

/* 产品内容包装器 */
.product_content_wrapper {
  width: 100%;
  max-width: 150rem;
  margin: 40px auto 0;
  padding: 0;
}

/* 手风琴 */
.accordion_box.main {
  margin-bottom: 30px;
}

.accordion_box .element {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion_box .element .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  transition: color 0.3s;
}

.accordion_box .element .title:hover {
  color: #e58707;
}

.svg_arrow {
  width: 24px;
  height: 24px;
  transition: transform 0.3s;
  color: #e58707;
}

.svg_arrow.open {
  transform: rotate(180deg);
}

.accordion_box .element .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}

.accordion_box .element .content.open {
  max-height: 500px;
  padding-bottom: 20px;
}

/* 产品描述 */
.description {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #909bb0;
}

.description :deep(h2) {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  margin: 40px 0 20px;
}

.description :deep(h3) {
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
  margin: 30px 0 15px;
}

.description :deep(p) {
  margin-bottom: 20px;
}

.description :deep(ul) {
  margin: 20px 0;
  padding-left: 30px;
}

.description :deep(li) {
  margin-bottom: 10px;
  position: relative;
  padding-left: 10px;
}

.description :deep(li::marker) {
  color: #e58707;
}

.description :deep(img) {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  display: block;
}

.description :deep(strong) {
  color: #fff;
  font-weight: 700;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .section-container {
    padding: 80px 3rem 60px;
  }

  .content_sides {
    gap: 40px;
    padding: 0;
  }

  .main_title {
    font-size: 5rem;
  }

  .product_image {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 900px) {
  .section-container {
    padding: 80px 3rem 60px;
  }

  .content_sides {
    flex-direction: column;
    gap: 30px;
    padding: 0;
    margin: 100px auto 60px;
  }

  .content_side__left {
    width: 100%;
    padding-right: 0;
  }

  .main_title {
    font-size: 4rem;
  }

  .product_display {
    flex-direction: column;
  }

  .product_image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .empty_blocks {
    width: 100%;
    flex-direction: row;
  }

  .catalog_block {
    width: calc(50% - 10px);
    height: 250px;
  }
}

@media (max-width: 600px) {
  .section-container {
    padding: 70px 3rem 60px;
  }

  .breadcrumbs {
    font-size: 1.2rem;
  }

  .main_subtitle {
    font-size: 1.4rem;
  }

  .main_title {
    font-size: 3.2rem;
  }

  .empty_blocks {
    flex-direction: column;
  }

  .catalog_block {
    width: 100%;
    height: 200px;
  }

  .description {
    font-size: 1.4rem;
  }

  .description :deep(h2) {
    font-size: 2.4rem;
  }

  .description :deep(h3) {
    font-size: 2rem;
  }
}
</style>

